<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0%;
      margin: 0%;
    }

    .head {
      position: relative;
      width: 100%;
      height: 100px;
      /* background-color: aqua; */
      float: left;
    }

    .head .titleDiv {
      position: absolute;
      font-size: 32px;
      top: 25px;
      left: 110px;
    }

    .head .logo {
      position: absolute;
      top: 20px;
      left: 40px;
      height: 60%;
      width: auto;
    }

    .logo img {
      height: 100%;
    }

    .head .headOther {
      width: 100%;
      height: 40px;
      position: absolute;
      top: 64px;
    }

    .head .headOther div {
      background-color: #068FD7;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      float: right;
      border-radius: 4px;
      color: white;
    }

    .middleDiv {
      position: relative;
      width: 100%;
      height: 356px;
      background-image: url(../img/serveCenter/lianjie-wantwant/background.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .middleDiv .font {
      font-size: 36px;
    }

    .linkDiv {
      position: absolute;
      width: 86%;
      height: 240px;
      top: 75%;
      left: 7%;
      align-items: center;
      display: flex;
    }

    .linkDiv div {
      margin-left: 1%;
      margin-right: 1%;
      width: 25%;
      height: 100%;
      background-color: rgba(7, 159, 239, 0.9);
    }

    .linkDiv div img {
      width: 80px;
      height: 80px;
      margin: 32px 0 16px;
    }

    .linkDiv div span {
      height: 20px;
      font-weight: bolder;
      font-size: 20px;
      line-height: 20px;
      color: white;
    }

    .programLine {
      position: relative;
      /* border: 1px solid black; */
      width: 100%;
      height: 130px;
      top: 150px;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

    .programLine div {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .programLine div .doc {
      border-radius: 50%;
      border: 4px solid #068FD7;
      width: 7px;
      height: 7px;
      background-color: white;
    }

    .JuBaoXuZhi {
      position: relative;
      width: 80%;
      height: 600px;
      border: 1px solid #CCCCCC;
      border-radius: 10px;
      left: 10%;
      margin-top: 15%;
    }

    .JuBaoXuZhi .title {
      height: auto;
      width: 100%;
      text-align: center;
      font-size: 24px;
      margin-top: 3%;
    }

    .JuBaoXuZhi .JuBaoXuZhi-item {
      position: relative;
      padding-left: 40px;
      height: auto;
      width: auto;
      margin-top: 30px;
      line-height: 25px;
      /* border: 1px solid black; */
    }

    .JuBaoXuZhi-item .span1 {
      font-size: 18px;
      color: #2a89d5;
    }

    .JuBaoXuZhi-item .docDiv {
      position: absolute;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 8px;
      height: 29px;
      margin-top: 3px;
    }

    .docDiv .doc {
      width: 8px;
      border: 4px solid #ccc;
      border-radius: 4px;
      text-align: start;
    }

    .tips {
      color: #888888;
      font-size: 12px;
    }

    .check {
      width: 100%;
      height: 30px;
    }

    .button {
      margin-top: 16px;
      margin-left: 43%;
      width: 14%;
      height: 40px;
      background-color: #4DA5FF;
      border-radius: 4px;
      justify-content: center;
      border: none;
      font-size: 16px;
      color: white;
    }

    .bottom {
      width: 100%;
      height: 110px;
      /* border: 1px solid black; */
      margin-top: 70px;
      text-align: center;
    }

    .bottom .font {
      width: 90%;
      height: auto;
      display: flex;
      /* align-items: center; */
      justify-content: center;
      margin-top: 10px;
    }

    .font div {
      padding-left: 50px;
      padding-right: 50px;
    }

    .bottom .line {
      width: 100vw;
      height: 4px;
      background-color: #068fd7;
      margin-top: 12px;
    }

    .ErWeiMa {
      position: absolute;
      margin-top: -80px;
      margin-left: 480px;
      size: 100px 100px;
      padding: 0%;
      width: 95px;
      border: 2px solid #068fd7;
      background-color: white;
      border-radius: 8px;
    }
  </style>
</head>

<body>
  <div class="head">
    <div class="logo">
      <img src="../img/serveCenter/lianjie-wantwant/logo.svg">
    </div>
    <div class="titleDiv">
      廉洁举报平台
    </div>
    <div class="headOther">
      <div style="margin-right: 60px;">反腐动态</div>
      <div style="margin-right: 16px;">
        </divstyle>廉洁制度</div>
    </div>
  </div>

  <div class="middleDiv">
    <div class="font">克/己/奉/公</div>
    <div>
      <img src="../img/serveCenter/lianjie-wantwant/middleImg.png" style="margin-left: 40px;margin-right: 40px;">
    </div>
    <div class="font">廉/洁/旺/旺</div>
    <div class="linkDiv">
      <div>
        <img src="../img/serveCenter/lianjie-wantwant/ErWeiMa.svg" /><br>
        <span>在线举报</span>
        <div style="width:100px; height:30px;
                    color:white; text-align: center;
                    margin-left: 30%;margin-top: 20px;
                    border: 1px solid white;
                    line-height: 30px;
                    border-radius: 5px;">
          点击举报
        </div>
      </div>

      <div>
        <img src="../img/serveCenter/lianjie-wantwant/telephone.svg" /><br>
        <span>电话举报</span><br><br>
        <span style="font-size: 16px;font-weight: 300;">021-61151931</span>
      </div>

      <div>
        <img src="../img/serveCenter/lianjie-wantwant/smartphone.svg" /><br>
        <span>手机举报</span><br><br>
        <span style="font-size: 16px;font-weight: 300;">13661813132</span>
      </div>

      <div>
        <img src="../img/serveCenter/lianjie-wantwant/email.svg" /><br>
        <span>手机举报</span><br><br>
        <span style="font-size: 16px;font-weight: 300;">GY_jihe@want-want.com</span>
      </div>

    </div>
  </div>

  <div class="programLine">
    <div style="height: 100%;width: 15%;">
      <div style="width:100%;height: 2px;background-color: #068FD7;">
        <div class="doc"></div>
        <div style="margin-top: 45px;margin-left:-35px">
          <span style="color: #068FD7;">举报须知</span>
        </div>
      </div>
    </div>

    <div style="height: 100%;width: 30%;">
      <div style="width:100%;height: 2px;background-color: #BBBBBB;">
        <div class="doc" style="border-color: #BBBBBB;margin-left: 50%;"></div>
        <div style="margin-top: 45px;margin-left:-35px">
          <span style="color: #BBBBBB;">在线举报</span>
        </div>
      </div>
    </div>

    <div style="height: 100%;width: 18%;">
      <div style="width:100%;height: 2px;background-color: #BBBBBB;">
        <div class="doc" style="border-color: #BBBBBB;margin-left: 94%;"></div>
      </div>
    </div>
    <div style="margin-top: 45px;margin-left:-25px;">
      <span style="color: #BBBBBB;">完成</span>
    </div>

  </div>

  <div class="JuBaoXuZhi">

    <div class="title">
      <span>举报须知</span>
    </div>

    <div class="JuBaoXuZhi-item">
      <span class="span1">举报受理部门</span><br>
      <div class="docDiv">
        <div class="doc"></div>
      </div>
      <div style="margin-left: 15px;margin-top: 3px;">
        <span style="font-size: 14px;color: #555555;">旺旺集团稽核内控中心稽核处</span>
      </div>
    </div>

    <div class="JuBaoXuZhi-item">
      <span class="span1">举报要求</span><br>
      <div class="docDiv">
        <div class="doc"></div>
      </div>
      <div style="margin-left: 15px;margin-top: 3px;">
        <span style="font-size: 14px;color: #555555;">举报应当实事求是，应如实提供材料</span>
      </div>
      <div class="docDiv">
        <div class="doc"></div>
      </div>
      <div style="margin-left: 15px;margin-top: 3px;">
        <span style="font-size: 14px;color: #555555;">鼓励实名举报，稽核人员会于您取得联系</span>
      </div>
      <div class="docDiv">
        <div class="doc"></div>
      </div>
      <div style="margin-left: 15px;margin-top: 3px;">
        <span style="font-size: 14px;color: #555555;">防止恶意举报</span>
      </div>
    </div>

    <div class="JuBaoXuZhi-item">
      <span class="span1">对举报人的保护</span><br>
      <div class="docDiv">
        <div class="doc"></div>
      </div>
      <div style="margin-left: 15px;margin-top: 3px;">
        <span style="font-size: 14px;color: #555555;">对举报人的个人信息及举报人提供的所有资料均严格保密</span>
      </div>
      <div class="docDiv">
        <div class="doc"></div>
      </div>
      <div style="margin-left: 15px;margin-top: 3px;">
        <span style="font-size: 14px;color: #555555;">举报人提供线索或资料属实，为旺旺集团阻止、减少
          或挽回重大经济损失，或对突破重大案件起重要作用的，给予举报人奖励；
          原则上限于实名举报。</span>
      </div>

      <br>
      <div class="tips">为便于后续跟踪处理调查，请您详细描述举报内容，如实填写手机号及邮箱</div>
    </div>

    <div class="check" style="margin-top: 50px;">
      <input type="checkbox" style="margin-left:40%" />
      <span style="font-size: 14px;">我已阅读理解以上内容</span>
      <span style="font-size: 12px;color: red;">请认真阅读并勾选</span>
    </div>

    <button class="button">在线举报</button>
  </div>

  <div class="bottom">
    <span style="font-size: 20px;">稽核内控中心</span>
    <div class="font">
      <div>邮寄地址：上海市红松东路1088号-旺旺集团稽核处</div>
      <div>从事反舞弊调查及受理违规违纪行为举报</div>
      <div>微信公众号:旺行天下-廉洁旺旺</div>
    </div>
    <div class="line"></div>
    <!-- <div class="ErWeiMa">

    </div> -->
    <img class="ErWeiMa" src="../img/serveCenter/lianjie-wantwant/ErWeiMa.svg" />
  </div>

</body>

</html>